<template>
  <div>
    <el-container>
      <el-header>
        <div class="header_container">
          <div class="nav_container w">
            <ul>
              <li v-show="isShowLogin1" @click="onClickLogin">登陆 | 注册</li>
              <li v-show="isShowLogin2">
                欢迎 {{ msg }}
                <span @click="onClickRemove">退出登录</span>
              </li>
              <li>我的订单</li>
              <li>我的收藏</li>
              <li class="cart">
                <div class="cart_box">
                  <el-menu
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#FF6F00"
                    router
                  >
                    <el-menu-item index="/cart">
                      <p>
                        <i class="el-icon-shopping-cart-2"></i>
                        购物车<span></span>
                      </p>
                    </el-menu-item>
                  </el-menu>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="tab_container w">
          <div class="tab_box w">
            <div class="logo_box">
              <img src="../assets/imgs/order.png" alt="" />
              <div class="right_box">
                <el-menu class="el-menu-demo" mode="horizontal" router>
                  <el-menu-item index="/">首页</el-menu-item>
                  <el-menu-item index="/commodity">全部商品</el-menu-item>
                  <el-menu-item index="/About">关于我们</el-menu-item>
                </el-menu>
              </div>
            </div>
            <div class="input_box">
              <el-input placeholder="请输入内容" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
    <el-dialog
      title="请输入账号和密码"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>
        <div>
          <p><input type="text" v-model="user" class="input" /></p>
          <br />
          <p><input type="password" v-model="pass" class="input" /></p>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">登录</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import {getlogin} from "../api/login";
export default {
  data() {
    return {
      isShowLogin1: true,
      isShowLogin2: false,
      dialogVisible: false,
      user: "",
      pass: "",
      msg: "",
    };
  },
  methods: {
    onClickLogin() {
      this.dialogVisible = true;
    },
    determine() {
      this.$axios
        .post("/api/users/login", {
          userName: this.user,
          password: this.pass,
        })
        .then((res) => {
          console.log(res);
          if (res.data.msg == "登录成功") {
            this.$message({
              message: "恭喜你功，登录成功",
              type: "success",
            });
            localStorage.setItem("userName", res.data.user.userName);
            this.isShowLogin1 = false;
            this.isShowLogin2 = true;
            this.msg = res.data.user.userName;
          }
        });
      this.dialogVisible = false;
    },
    onClickRemove() {
      localStorage.removeItem("userName");
      this.isShowLogin1 = true;
      this.isShowLogin2 = false;
      this.$message({
        message: "退出成功",
        type: "success",
      });
    },
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.w {
  width: 1200px;
  margin: 0 auto;
}
.el-header,
.el-footer {
  color: #333;
  height: 150px;
  // line-height: 40px;
}
span {
  cursor: pointer;
}
.el-header {
  height: 140px !important;
}
.header_container {
  height: 100%;
  height: 40px;
  // background-color: rgb(153, 135, 235);
  background-color: black;
}
.nav_container {
  height: 40px;
  // background-color: skyblue;
  ul {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
  }
  li {
    padding: 0 20px;
    // height: 30px;
    color: darkgrey;
    cursor: pointer;
  }
  .cart {
    color: #fff;
    // background-color: orange;
  }
  .cart_box {
    height: 30px;
    .el-menu-item {
      height: 40px !important;
      p {
        line-height: 40px;
        color: #fff;
        i {
          color: #fff;
        }
      }
    }
  }
}
.tab_container {
  width: 100%;
  height: 140px;
  background-color: #fff;
}
.tab_box {
  height: 110px;
  // background-color: orchid;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  .logo_box {
    width: 60%;
    height: 100%;
    // background-color: green;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 200px;
      height: 70%;
    }
  }
  .input_box {
    width: 20%;
    height: 100%;
    // background-color: green;
    display: inline-flex;
    align-items: center;
  }
}
.right_box {
  margin-left: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  // line-height: 160px;
  // height: 500px;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-footer {
  background-color: black;
}
.input {
  width: 200px;
  height: 30px;
}
</style>